<template>
  <div style="width: 100%;">
    <el-dialog :destroy-on-close="true"
               :modal-append-to-body="false"
               title="菜单"
               :visible.sync="visible"
               width="1000px">
      <div style="width: 100%;height: 500px;overflow-y: scroll">
        <el-form ref="form" :model="formData" :rules="rules" label-width="100px" size="medium">
          <el-col :span="12">
            <el-form-item label="中文名称" prop="name">
              <el-input v-model="formData.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单类型" prop="alias">
              <el-radio-group size="mini" v-model="formData.alias">
                <el-radio-button label="folder">目录</el-radio-button>
                <el-radio-button label="menu">菜单</el-radio-button>
                <el-radio-button label="tag">标签页</el-radio-button>
                <el-radio-button label="button">按钮</el-radio-button>
                <el-radio-button label="table">表格</el-radio-button>
                <el-radio-button label="form">表单</el-radio-button>
                <el-radio-button label="input">输入框</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="英文名称" prop="nameEn">
              <el-input v-model="formData.nameEn"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="英文描述">
              <el-input v-model="formData.describesEn"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="中文描述">
              <el-input v-model="formData.describes"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <avue-form v-if="dialogType !== 'addChild'" :option="option" v-model="formData"></avue-form>
            <el-form-item v-if="dialogType === 'addChild'" label="父路由">
              <el-select :disabled="true" v-model="formData.parentId">
                <el-option :label="row.name" :value="row.oid"></el-option>
              </el-select>
            </el-form-item>

          </el-col>

          <el-col :span="24">
            <el-form-item label="路由" prop="path">
              <el-input v-model="formData.path"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="排序" prop="orders">
              <el-input-number style="width: 100%;" :min="0" v-model="formData.orders"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="图标">
              <el-input v-model="formData.icon"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="权限标识" prop="code">
              <el-input v-model="formData.code"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="enableFlag">
              <el-radio-group size="mini" v-model="formData.enableFlag">
                <el-radio-button :label="1">启用</el-radio-button>
                <el-radio-button :label="0">禁用</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-form>
      </div>

      <div slot="footer" style="text-align: center">
        <el-button size="medium" type="primary" @click="save">保存</el-button>
        <el-button size="medium" @click="visible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import * as api from "@/api/menu/index"

export default {
  name: "menuDialog",
  data() {
    return {
      visible: false,
      formData: {
        name: "",
        alias: "",
        nameEn: "",
        describesEn: "",
        describes: "",
        path: "",
        orders: "",
        icon: "",
        code: "",
        enableFlag: "",
        parentId: "",
      },
      rules: {
        name: [{required: true, message: "请输入中文名称", trigger: "blur"}],
        alias: [{required: true, message: "请选择菜单", trigger: "change"}],
        nameEn: [{required: true, message: "请输入英文名称", trigger: "blur"}],
        path: [{required: true, message: "请输入路由", trigger: "blur"}],
        orders: [{required: true, message: "请输入排序", trigger: "blur"}],
        code: [{required: true, message: "请输入权限标识", trigger: "blur"}],
        enableFlag: [{required: true, message: "请选择状态", trigger: "change"}],
      },
      dialogType: "add",

      option: {
        submitBtn: false,
        emptyBtn: false,
        menuBtn: false,
        size: "medium",
        column: [{
          label: '父路由',
          prop: 'parentId',
          type: 'tree',
          dicUrl: `/api/user-api/mx-menu/list?parentId=0`,
          props: {
            label: 'name',
            value: 'oid'
          },
          lazy: true,
          treeLoad: (node, resolve) => {
            const parentId = node.data.oid ? node.data.oid : 0 + "";
            api.getMenuList({parentId}).then(res => {
              resolve(res.data.data);
            })
          }
        }]
      },

      row: {}
    }
  },
  methods: {
    save() {
      this.$refs['form'].validate(f => {
        if (f) {
          api.add(this.formData).then(() => {
            this.visible = false;
            this.$message.success("保存成功");
            this.$emit("refresh")
          })
        }
      })
    },

    edit(row) {
      this.visible = true;
      this.dialogType = "edit";
      api.getDetail({oid: row.oid}).then(res => {
        Object.assign(this.formData, res.data.data);
      })

    },
    addChild(row) {
      this.visible = true;
      this.dialogType = "addChild";
      this.formData.parentId = row.oid;
      this.row = row;
      // this.option.column[0].disabled = true;
    },

    open() {
      this.dialogType = "add";
      this.visible = true;
    },
    close() {
      this.visible = false;
    }
  }
}
</script>
<style scoped>

</style>
